/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(50px);
  opacity: 0;
}
.fadein-enter-active,.fadein-leave-active{
  opacity: 1;
  transition:opacity .7s;
  -webkit-transition:opacity .7s;
}
.fadein-enter,.fadein-leave {
  opacity: 0;
  transition:opacity .7s;
  -webkit-transition:opacity .7s;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}


/*v-enter 是进入之前，元素的起始状态*/
/*v-leave-to 离开之后动画的终止状态*/
.zg-rotateY-enter{
    opacity: 0;
    transform: scale(0.4) rotateY(170deg);
}
.zg-rotateY-leave-to{
    opacity: 0;
    transform: scale(0.4) rotateY(0deg);
}
/*入场(离场)动画的时间段   */
.zg-rotateY-enter-active{
    transition: all 0.5s ease;
}
.zg-rotateY-leave-active {
    transition: all 0.2s ease;
}


@keyframes bounceInUp{
	0%, 100%, 60%, 75%, 90% {
	    -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
	    transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
	  }
	  0% {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 3000px, 0);
	    -ms-transform: translate3d(0, 3000px, 0);
	    transform: translate3d(0, 3000px, 0)
	  }
	  60% {
	    opacity: 1;
	    -webkit-transform: translate3d(0, -20px, 0);
	    -ms-transform: translate3d(0, -20px, 0);
	    transform: translate3d(0, -20px, 0)
	  }
	  75% {
	    -webkit-transform: translate3d(0, 10px, 0);
	    -ms-transform: translate3d(0, 10px, 0);
	    transform: translate3d(0, 10px, 0)
	  }
	  90% {
	    -webkit-transform: translate3d(0, -5px, 0);
	    -ms-transform: translate3d(0, -5px, 0);
	    transform: translate3d(0, -5px, 0)
	  }
	  100% {
	    -webkit-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0)
	  }
}


@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes shake {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    -ms-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg)
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    -ms-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg)
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg)
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    -ms-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg)
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg)
  }
}